<template>
	<view>
			<u-navbar  title="Forget Password" 
			is-back="true" 
			title-width="50rpx" 
			title-color="#473C33" 
			height="48px" 
			back-icon-color="#473C33"
			:background="background"
			@custom-back="toLogin()"
			></u-navbar>
			<view class="content">
				<u-form :model="form" ref="uForm" class="form" label-position="top">
					<u-form-item  prop="email" class="code">
						<u-input v-model="form.email"  placeholder="E-mail" placeholder-style="color: #cccccc;font-size:22rpx;font-family: 'Arial Normal', 'Arial', sans-serif;" @input="onInput(form.email)"/>
					</u-form-item>
					
					<u-form-item  prop="code" class="code">
						<u-input v-model="form.code" placeholder="Verification code" placeholder-style="color: #cccccc;font-size:22rpx;font-family: 'Arial Normal', 'Arial', sans-serif;"/>
					</u-form-item>
					<u-form-item  prop="npwd" class="code">
						<u-input v-model="form.npwd" type="password" placeholder="New password" placeholder-style="color: #cccccc;font-size:22rpx;font-family: 'Arial Normal', 'Arial', sans-serif;" @input="onInput1(form.npwd)"/>
					</u-form-item >
					<u-form-item prop="dnpwd" class="code">
						<u-input v-model="form.dnpwd" type="password" placeholder="Confirm the new password" placeholder-style="color: #cccccc;font-size:22rpx;font-family: 'Arial Normal', 'Arial', sans-serif;" />
					</u-form-item>
				</u-form>
				<button class="Send" @click="submit1">{{computeTime>0 ? `(${computeTime}s)` : 'Send'}}</button>
				<u-button class="submit" @click="submit" >Submit</u-button>
			</view>
			
	</view>
	
	
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {sendcode} from '../../api/login/login.js'
	import {changePwd} from '../../api/login/changePwd.js'
export default {
	data() {
		return {
			computeTime:0,
			timer: null,
			test:12,
			form: {
				email: '',
				code: '',
				npwd: '',
				dnpwd:'',
			},
			background: {
				backgroundColor: '#ffffff',
			},
			rules:{
				email:[
					//对邮箱进行必填验证
					{
						required: true,
						message: 'Please input your email',
						trigger: 'blur'
					},
					//对邮箱进行规则验证
					{
						type: 'email',
						message: '邮箱格式不正确',
						trigger: 'blur'
					}
				],
				code:[//Invalid verification code
					{
						required: true,
						message: 'Please input your code',
						trigger: 'blur'
					},
					{
						min:6,
						max:6,
						message: 'The code must be 6 long',
						trigger: 'blur'
					}
				],
				npwd:[
					{
						required: true,
						message: 'Please input your password',
						trigger: 'blur'
					},
					{
						min:6,
						max:16,
						message: 'The password must be 6 to 16 long',
						trigger: 'blur'
					}
				],
				dnpwd:[
					{
						asyncValidator: (rule, value, callback) => {
							if(value!=this.form.npwd){
								
								callback(new Error("两次输入不一致！"))
							}else{
								callback();
							}
						},
						trigger: 'blur'
					}
				]
			}
		};
	},
	methods:{
		toLogin(){
			uni.navigateTo({
				url:"../login/login"
			})
			fail: (res) => {
			                    console.log(res)//打印错误信息
			                }
		},
		onInput(e){
		this.form.email=e;
		},
		onInput1(e){
			this.form.npwd=e;
		},
		submit1(){
			console.log(this.form.email)
			if(this.form.email!=''){
				var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if (!reg.test(this.form.email)) 
				{ 
					uni.showToast({title:"wrong email", icon: "none"});
					}else{
						//开始连接口	
						sendcode({emailaddress:this.form.email}).then(res=>{
								uni.hideLoading();
								console.log("aaaaaaaaaaaaa")
								console.log(res)
								this.test=13;
								if(res.message=='No such mailbox'){
									uni.showToast({
										title:"No such email", icon: "none"
									});
								}else{
										if(!this.computeTime){
											this.computeTime = 60;
											this.timer = setInterval(() => {
											this.computeTime--;
										if (this.computeTime <= 0) {
											clearInterval(this.timer)
											}
										}, 1000);
									}
								}
							})
							this.test=10
						console.log(this.test)
					}
			}else{
				uni.showToast({title:"Please input your email", icon: "none"})
			}
		},
		submit(){
			//console.log(this.$refs.uForm.valueOf());
			this.$refs.uForm.validate(valid=>{
				if(valid){
					console.log('验证通过');
					//接接口
					var params={emailaddress:this.form.email,code:this.form.code,password:this.form.npwd,repeatpassword:this.form.dnpwd};
					
					changePwd(params).then(res=>{
						console.log("哈哈哈哈");
						uni.hideLoading();
						console.log(res)
						console.log(typeof(res))
						if(res.data.message=="No such mailbox"){
							uni.showToast({
								title:"No such mailbox", icon: "none"
							})
						}else if(res.data.message=='Format error'){
							uni.showToast({
								title:res.data,icon:"none"
							})
						}else if(res.data.message=='Invalid verification code'){
							uni.showToast({
								title:"Invalid verification code",icon:"none"
							})
						}else{
							uni.showToast({
								title:"Success!",icon:"none"
							})
						}
					})
					
				}else{
					console.log('验证失败');
				}
			})
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
		}
	}
};
</script>
<style scoped lang="scss">
@import "../../uview-ui/libs/css/style.components.scss";
.form{
	position: relative;
	margin-top: 10px;
	padding: 80px 40px;
	width: 375px;
	height: 100px;

}

.code{
	width: 300px;
	height: 70px;
}
.submit {
        position: relative;
        top:250px;
		width:500rpx;
		height: 80rpx;
		background-color:#abc270;
		color: #fefefe;
		border-radius:3px;
		font-size:15px;
		border:#ffffff;
		text-align: center;
		opacity: 0.85;
		padding: 2px 2px 2px 2px;
    }
.Send{
	position: relative;
	left: 250rpx;
	margin-top: 10rpx;
	width: 50px;
	  height: 25px;
	  opacity: 0.85;
	  padding: 1.5px 2px 1px 1px;
	  border-radius: 3px;
	  background-color: #abc270;
	  box-sizing: border-box;
	  font-size:15px;
	  font-family: '微软雅黑', sans-serif;
	  color: #ffffff;
	  line-height:normal;
}
</style>
